<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WeiLanBlog - 博客</title>
    <link href="https://fonts.googleapis.com/css2?family=SF+Pro+Display:wght@400;500;600&display=swap" rel="stylesheet">
    <style>
       .status-bar span {
            text-align: center;
        }

        /* 全局样式 */
        body {
            font-family: 'SF Pro Display', Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
            color: #333;
        }

       .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        header {
            text-align: center;
            margin-bottom: 40px;
            position: relative; /* 为了定位左上角的按钮 */
        }

        header h1 {
            font-size: 2.5rem;
            color: #0078d7;
        }

        /* 新增的左上角按钮样式 */
       .add-post-toggle {
            position: absolute;
            top: 10px;
            left: 10px;
            cursor: pointer;
            font-size: 30px; /* 增大按钮字体大小 */
            color: #000; /* 设置按钮颜色为黑色 */
            background: none;
            border: none;
            z-index: 10; /* 确保按钮在其他元素之上 */
        }

       .blog-posts {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
        }

       .post-card {
            background: white;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            transition: transform 0.3s ease;
        }

       .post-card:hover {
            transform: translateY(-5px);
        }

       .post-card img {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }

       .post-content {
            padding: 20px;
        }

       .post-content h2 {
            font-size: 1.5rem;
            margin-bottom: 10px;
        }

       .post-content p {
            font-size: 14px;
            color: #666;
            margin-bottom: 20px;
        }

       .pagination {
            display: flex;
            justify-content: center;
            margin-top: 40px;
        }

       .pagination a {
            display: inline-block;
            padding: 10px 20px;
            margin: 0 5px;
            background: #0078d7;
            color: white;
            border-radius: 5px;
            text-decoration: none;
            transition: background-color 0.3s ease;
        }

       .pagination a:hover {
            background: #0056b3;
        }

       .add-post-form {
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            display: none; /* 默认隐藏添加文章表单 */
            position: absolute;
            top: 40px; /* 调整位置，不要太靠下 */
            left: 10px;
            z-index: 9; /* 确保窗口在文章列表之上，但在按钮之下 */
        }

       .add-post-form h2 {
            margin-bottom: 20px;
            text-align: center;
        }

       .add-post-form label {
            display: block;
            margin-bottom: 5px;
        }

       .add-post-form input,
       .add-post-form textarea,
       .add-post-form select {
            width: 300px; /* 适当调整表单宽度 */
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #e0e0e0;
            border-radius: 5px;
        }

       .add-post-form button {
            background-color: #0078d7;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
        }

       .add-post-form button:hover {
            background-color: #0056b3;
        }

       .add-post-form.close-button {
            position: absolute;
            top: 10px;
            right: 10px;
            cursor: pointer;
            font-size: 20px;
            color: #666;
        }

       .login-container {
            position: fixed;
            top: 10px;
            right: 10px;
            background: white;
            padding: 15px;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            display: none;
        }

       .login-container.active {
            display: block;
        }

       .login-container.close-button {
            position: absolute;
            top: 5px;
            right: 5px;
            cursor: pointer;
            font-size: 20px;
            color: #666;
        }

       .login-container label {
            display: block;
            margin-bottom: 5px;
        }

       .login-container input {
            width: 100%;
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #e0e0e0;
            border-radius: 5px;
        }

       .login-container button {
            background-color: #0078d7;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
        }

       .login-container button:hover {
            background-color: #0056b3;
        }

       .avatar {
            position: fixed;
            top: 10px;
            right: 60px;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            overflow: hidden;
            display: none;
        }

       .avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

       .image-preview {
            max-width: 100%;
            max-height: 200px;
            margin-top: 10px;
            display: none;
        }

       .blog-list-link {
            display: block;
            text-align: center;
            margin-top: 20px;
            background: #0078d7;
            color: white;
            padding: 10px 20px;
            border-radius: 5px;
            text-decoration: none;
            transition: background-color 0.3s ease;
        }

       .blog-list-link:hover {
            background: #0056b3;
        }
    </style>
</head>

<body>
    <div class="container">
        <header>
            <h1>WeiLanBlog - 博客</h1>
            <button class="add-post-toggle" onclick="toggleAddPostForm()">+</button>
        </header>

        <div class="add-post-form">
            <span class="close-button" onclick="hideAddPostForm()">&times;</span>
            <h2>添加文章</h2>
            <form method="post" action="process.php" enctype="multipart/form-data">
                <label for="username">用户名:</label>
                <input type="text" id="username" name="username" required>
                <label for="password">密码:</label>
                <input type="password" id="password" name="password" required>
                <label for="author">文章作者:</label>
                <input type="text" id="author" name="author" required>
                <label for="title">文章标题:</label>
                <input type="text" id="title" name="title" required>
                <label for="content">文章内容:</label>
                <textarea id="content" name="content" required></textarea>
                <label for="image">选择图片:</label>
                <input type="file" id="image" name="image">
                <img src="" alt="Image Preview" class="image-preview" id="imagePreview">
                <label for="template">文章模板:</label>
                <select id="template" name="template">
                    <option value="default">默认模板</option>
                    <option value="template1">模板1</option>
                    <option value="template2">模板2</option>
                </select>
                <button type="submit">提交文章</button>
            </form>
        </div>

        <div class="blog-posts">
            <!-- 博客文章卡片 -->
            <div class="post-card">
                <img src="Blog/img/weilan.png" alt="Post Image">
                <div class="post-content">
                    <h2>WeiLan~Blog</h2>
                    <p>一个国产的博客构建构架</p>
                    <a href="blog/blog.html" class="read-more">阅读全文</a>
                </div>
            </div>
            <!-- 更多文章卡片 -->
        </div>

        <!-- 分页导航 -->
        <div class="pagination">
            <a href="#">上一页</a>
            <a href="#">1</a>
            <a href="#">2</a>
            <a href="#">3</a>
            <a href="#">下一页</a>
        </div>

        <!-- 跳转到文章列表页的链接 -->
        <a href="blog1.html" class="blog-list-link">查看所有文章</a>
    </div>

    <!-- 登录框 -->
    <div class="login-container" id="loginContainer">
        <span class="close-button" onclick="hideLogin()">&times;</span>
        <label for="loginUsername">用户名:</label>
        <input type="text" id="loginUsername" name="loginUsername" required>
        <label for="loginPassword">密码:</label>
        <input type="password" id="loginPassword" name="loginPassword" required>
        <button type="button" onclick="login()">登录</button>
    </div>

    <!-- 头像 -->
    <div class="avatar" id="avatar">
        <img src="assets/avatar/user1.png" alt="Avatar">
    </div>

    <!-- 底部访问人数 -->
    <div class="footer">
        <p>访问人数: <span id="visitorCount">0</span></p>
        <p>
            ©2025 本博客由 <a href="https://gitee.com/scicat-team/wei_-lan-blog" target="_blank"
                class="footer-link">Wei Lan-Blog</a> 构架提供
        </p>
        <p class="quote">
            我和别人的故事很少，却和自己的故事有很多。
        </p>
    </div>
    <script src="js/bj.js"></script>
    <script>
        // 显示/隐藏登录框
        function showLogin() {
            document.getElementById('loginContainer').classList.add('active');
        }

        function hideLogin() {
            document.getElementById('loginContainer').classList.remove('active');
        }

        // 真正的登录功能
        async function login() {
            const username = document.getElementById('loginUsername').value;
            const password = document.getElementById('loginPassword').value;
            try {
                const response = await fetch('process.php', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        username: username,
                        password: password
                    })
                });
                const data = await response.json();
                if (data.success) {
                    // 登录成功，显示头像
                    document.getElementById('avatar').style.display = 'block';
                    hideLogin();
                } else {
                    alert('用户名或密码错误');
                }
            } catch (error) {
                console.error('登录错误:', error);
                alert('登录过程中出现错误，请重试');
            }
        }

        // 记录访问人数
        const visitorCountElement = document.getElementById('visitorCount');
        let visitorCount = localStorage.getItem('visitorCount');
        if (!visitorCount) {
            visitorCount = 1;
        } else {
            visitorCount = parseInt(visitorCount) + 1;
        }
        localStorage.setItem('visitorCount', visitorCount);
        visitorCountElement.textContent = visitorCount;

        // 图片预览
        const imageInput = document.getElementById('image');
        const imagePreview = document.getElementById('imagePreview');
        imageInput.addEventListener('change', function () {
            const file = this.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function (e) {
                    imagePreview.src = e.target.result;
                    imagePreview.style.display = 'block';
                };
                reader.readAsDataURL(file);
            }
        });

        // 新增的显示/隐藏添加文章表单的函数
        function toggleAddPostForm() {
            const addPostForm = document.querySelector('.add-post-form');
            if (addPostForm.style.display === 'none') {
                addPostForm.style.display = 'block';
            } else {
                addPostForm.style.display = 'none';
            }
        }

        // 隐藏添加文章表单的函数
        function hideAddPostForm() {
            document.querySelector('.add-post-form').style.display = 'none';
        }
    </script>
</body>

</html>
